<template>
  <view class="send-coupon" style="width: 60vw;padding:0 4rem 4rem;">
    <view class="flex">
      <view class="flex align-center flex-1 margin-right">
        <text class="margin-right" style="width: 10rem;"><text class="text-red">*</text> 发放对象:</text>
        <view class="" style="flex:1;">
          <uni-data-select v-model="senderObj" :localdata="range" @change="change"></uni-data-select>
        </view>
      </view>
      <view class="flex align-center  flex-1">
        <text class="margin-right" style="width: 10rem;margin-left: 4rem;"><text class="text-red">*</text>发放数量:</text>
        <view class="" style="flex:1;">
          <uni-easyinput primaryColor="#38C09E" v-model="sendAmount" type="number" @change="changeSendAmount" />
        </view>
        <text class="margin-left">张</text>
      </view>
    </view>
    <view class="search-bar" v-if="senderObj==='指定会员'">
      <uni-easyinput primaryColor="#38C09E" v-model="searchKey" placeholder="姓名/手机号"> </uni-easyinput>
      <button class="button" @click="getList">查询</button>
    </view>
    <view class="member-list" v-if="senderObj==='指定会员'">
      <uni-table ref="table" border stripe emptyText="暂无更多数据" type="selection" @selection-change="selectionChange">
        <!-- 表头行 -->
        <uni-tr>
          <uni-th align="left" v-for="item in tableHead">{{item.label}}</uni-th>
        </uni-tr>
        <!-- 表格数据行 -->
        <uni-tr v-for="item in list">
          <uni-td align="left" v-for="col in tableHead">{{item[col.columns]}}</uni-td>
        </uni-tr>
      </uni-table>
      <uni-pagination show-icon="false" :total="total" :pageSize="rownumber" :current="pageNo" @change="changePage">
      </uni-pagination>
    </view>

    <view class="buttons flex justify-center padding-tb">
      <button class="button line-white margin-right" @click="cancel">取消</button>
      <button class="button" @click="sendCoupon"
        :class="{disabled:senderObj==='指定会员' &&menber_list.length===0}">确定</button>
    </view>
  </view>
</template>

<script>
  export default {
    name: "send-coupon",
    props: {
      couponInfo: {
        type: Object
      },
    },
    data() {
      return {
        searchKey: "",
        senderObj: '全部会员', // 优惠券发放对象
        sendAmount: 1, //发放数量
        range: [{
            value: "全部会员",
            text: "全部会员"
          },
          {
            value: "指定会员",
            text: "指定会员"
          }
        ],
        menber_list: [],
        pageNo: 1,
        rownumber: 5,
        total: 0,
        list: [],
        v2Data: null
      };
    },
    mounted() {
      this.getTableV2()
      this.getList()
    },
    computed: {
      fieldInfo() {
        return this.v2Data?._fieldInfo || []
      },
      tableHead() {
        return this.fieldInfo.filter(item => item.in_list === 1)
      },
    },
    methods: {
      changeSendAmount(e) {
        console.log(e);
        if (e > 9999999) {
          uni.showToast({
            title: '发放数量在1-9999999之间',
            icon: 'none'
          })
          setTimeout(()=>{
            this.sendAmount=9999999
          },300)
        }
      },
      changePage(e) {
        const {
          type,
          current
        } = e
        this.pageNo = current
        // this.onFilter(null, current)
        this.getList()
      },
      clearSelection() {
        this.$refs?.table?.clearSelection()
      },
      selectionChange(e) {
        this.menber_list = this.list.filter((item, index) => e.detail.index.includes(index))
      },
      change(e) {
        if (e == '指定会员') {
          this.getList()
        }
      },
      getList() {
        this.clearSelection()
        const url = `/retail/select/srvretail_member_info_choice_select`
        const req = {
          "serviceName": "srvretail_member_info_choice_select",
          "colNames": ["*"],
          "condition": [],
          "relation_condition": {},
          "page": {
            "pageNo": this.pageNo,
            "rownumber": 5
          },
        }
        if (this.searchKey) {
          req.relation_condition = {
            relation: 'OR',
            data: [{
                colName: 'member_name',
                ruleType: 'like',
                value: this.searchKey
              },
              {
                colName: 'member_phone',
                ruleType: 'like',
                value: this.searchKey
              },
            ]
          }
        }
        this.$http.post(url, req).then(res => {
          this.list = res.data.data
          this.total = res?.data?.page?.total
        })
      },
      async getTableV2() {
        const url = '/retail/select/srvsys_service_columnex_v2_select?colsel_v2=srvretail_member_info_choice_select'
        const req = {
          "serviceName": "srvsys_service_columnex_v2_select",
          "colNames": ["*"],
          "condition": [{
            "colName": "service_name",
            "value": "srvretail_member_info_choice_select",
            "ruleType": "eq"
          }, {
            "colName": "use_type",
            "value": "selectlist",
            "ruleType": "eq"
          }],
          "order": [{
            "colName": "seq",
            "orderType": "asc"
          }]

        }
        const res = await this.getServiceV2('srvretail_member_info_choice_select', 'select', 'list', 'retail')
        this.v2Data = res

        // const res = await this.$http.post(url,req)
      },
      cancel() {
        this.$emit('cancel')
      },
      sendCoupon() {
        // 全部会员发放
        if(!this.senderObj){
          uni.showToast({
            title:'请选择发放对象',
            icon:'none'
          })
          return
        }
        if(!this.sendAmount){
          uni.showToast({
            title:'请填写发放数量',
            icon:'none'
          })
          return
        }
        if(this.senderObj==='指定会员'&&this.menber_list.length===0){
          uni.showToast({
            title:'至少需要选择一个会员',
            icon:'none'
          })
          return
        }
        uni.showModal({
          title: '提示',
          content: '确认操作？',
          success: (res) => {
            if (res.confirm) {
              const url = `/mkt/operate/srvmkt_member_coupon_custom_add`
              const req = [{
                "serviceName": "srvmkt_member_coupon_custom_add",
                "condition": [],
                "data": [{
                  "_release_type": this.senderObj,
                  "coupon": [{
                    "coupon_no": this.couponInfo.coupon_no,
                    "_release_num": this.sendAmount
                  }],
                  "_menber_list": this.menber_list.map(item => item.menber_no) || []
                }],
                "srvApp": "mkt"
              }]
              this.$http.post(url, req).then(res => {
                if (res?.data?.state === 'SUCCESS') {
                  uni.showToast({
                    title: res.data.resultMessage,
                    icon: 'none'
                  })
                  this.$emit('success')
                } else {
                  uni.showToast({
                    title: res.data.resultMessage,
                    icon: 'none'
                  })

                }
              })
            }
          }
        })

      },
    },
  }
</script>

<style lang="scss" scoped>
  .search-bar {
    display: flex;
    margin: 2rem 0;

    .button {
      // margin-left: 2rem;
    }
  }
</style>
